<template>
    <div class="l-rblock l-chat-history" v-loading="loading">
        <l-layout class="l-chat-history-body" :top="36" :topMove="false" :bottom="34" :bottomMove="false">
            <template #top>
                <el-input v-model="searchWord" size="small" placeholder="搜索：请输入关键词" @keyup.enter.native="hanleSearch" clearable >
                    <i slot="suffix" class="el-input__icon el-icon-search"  @click="hanleSearch" />
                </el-input>
            </template>
            <template #bottom >
                <el-pagination
                    :pager-count="9"
                    background
                    small
                    layout="prev, pager, next"
                    :current-page.sync="page"
                    :page-count="total"
                    
                    @current-change="turnTablePage"
                    >
                    </el-pagination>
            </template>
            <div class="l-rblock l-chat-box" style="overflow: auto;" ref="msgList">
                <div :class="['l-chat-box-msg-item',{'me':isMe(item)}]" v-for="(item,index) in msgList" :key="index">
                    <el-avatar :size="36" :src="avatar(item.f_SendUserId)" class="l-chat-box-avatar">
                         <img :src="`${rootUrl}img/admin/head.png`"/>
                    </el-avatar>
                    <div class="l-chat-box-msg-title" v-if="!isMe(item)" >{{getName(item.f_SendUserId)}}<span class="time">{{getTime(item.f_CreateDate)}}</span></div>
                    <div class="l-chat-box-msg-title" v-else ><span class="time">{{getTime(item.f_CreateDate)}}</span>{{getName(item.f_SendUserId)}}</div>
                    <div class="l-chat-box-msg-content">
                        <div class="arrow" ></div>
                        {{item.f_Content}}
                    </div>
                </div>
            </div>
        </l-layout>
    </div>
    
</template>

<script>
export default {
    name: "chat-history",
    props:{
         otherId:String,
    },
    data () {
        return {
            searchWord:'',
            total:0,
            page:1,
            msgList:[],
            loading:false
        }
    },
    created () {
        
    },
    mounted () {
        this.loadMsg()
    },
    computed: {
    },
    methods: {
        hanleSearch(){
             this.loadMsg()
        },

        async loadMsg(isNotFirst){
            this.loading = true
            if(!isNotFirst){
                this.page = 1;
            }
            const queryData = {
                rows:30,
                page:this.page,
                sidx:'F_CreateDate DESC',
                toId:this.otherId,
                sendId:this.loginInfo.f_UserId,
                keyword:this.searchWord
            }
            // 获取聊天记录
            const api = window.$api.message.msg
            const data = (await this.$awaitWraper(api.getPage(queryData))) || {}
            this.total = data.total || 0
            this.msgList = (data.rows || []).sort((a,b)=>{return Date.parse(a.f_CreateDate) - Date.parse(b.f_CreateDate)})

            this.$nextTick(()=>{
                this.$refs.msgList.scrollTop = this.$refs.msgList.scrollHeight
            })
            this.loading = false
        },
        turnTablePage(){
            this.loadMsg(true)
        },

        isMe(item){
            if(item.f_SendUserId != this.loginInfo.f_UserId){
                return false
            }
            return true
        },
        getName(id){
            //
            if(id == this.loginInfo.f_UserId){
                return '我'
            }
            const user = this.lr_users[id]
            if(user){
                let res =  user.f_RealName
                if(user.f_DepartmentId){
                    this.lr_loadDepartment(user.f_DepartmentId)
                    const department = this.lr_department[user.f_DepartmentId]
                    if(department){
                        res += `/${department.f_FullName}`
                    }
                }
                return res
            }
            else{
                return ' '
            }
        },
        getTime(time){
            const nowDate = this.$getDayTime('yyyy-MM-dd')
            const myDate = this.$formatDate(time,'yyyy-MM-dd')
            if(nowDate != myDate){
                return this.$formatDate(time,'yyyy-MM-dd HH:mm:ss')
            }
            else{
                return this.$formatDate(time,'HH:mm:ss')
            }
        },
        avatar(id){
            let user = null
            if(id == this.loginInfo.f_UserId){
                user = this.loginInfo
            }
            else{
                user = this.lr_users[id]
            }
            
            if(user){
                return user.f_HeadIcon ? `${this.apiUrl}organization/user/img/${user.f_HeadIcon}?token=${this.token}` : `${this.rootUrl}img/admin/head.png`
            }
            return `${this.rootUrl}img/admin/head.png`
        },
    }
};
</script>

<style lang="scss">
    .l-chat-history{
        .el-input__inner {
            border-radius: 0 !important;
            border-right: none !important;
            border-left: none !important;
            border-top: none !important;
            
        }
        .el-input__icon {
            cursor: pointer;
        }
        &-body{
            background: #fff;
        }
    }
</style>
